<template>
  <div class="d-flex flex-column h-100">
    <div class="p-3 bg-white">
      <h3 class="m-0">文件管理</h3>
    </div>
    <div class="d-flex flex-column h-100 px-3 pb-1">
      <ul class="nav nav-tabs nav-line mb-3 flex" role="tablist">
        <li class="nav-item"><a class="nav-link active" type="">全部</a></li>
        <li class="nav-item"><a class="nav-link" type="image">图片</a></li>
        <li class="nav-item"><a class="nav-link" type="audio">音频</a></li>
        <li class="nav-item"><a class="nav-link" type="video">视频</a></li>
        <li class="nav-item"><a class="nav-link" type="application">文档</a></li>
      </ul>
      <div class="row row-gap-1 relative">
        <div class="loader bg-app"><i class="fa fa-spinner"></i></div>
        <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2" ng-repeat="file in page.items track by file.id">
          <div style="background-image: url('/static/img/dummy1.jpg')" class="file-item">
            <label class="ui-checkbox lg inverse text-success">
              <input type="checkbox" ng-click="select(file, $event)"><i></i>
            </label>
            <span class="btn-play play" ng-click="play(file, $event)">
            <span class="btn-play-ring"></span>
          </span>
            <i class="fa fa-file-archive-o text-primary"></i>
            <span class="overlayer"></span>
            <span class="info px-2">
            <span class="text-white text-truncate" title="{file.filename}">{file.filename}</span>
            <span class="float-right">{file.size | filesize}</span>
          </span>
          </div>
        </div>
      </div>

      <div class="row bg-faded mt-auto bt-l pt-2">

        <div id="loading-bar" class="mb-3px hide">
          <div class="bar absolute" style="width: 33%">
            <div class="peg"></div>
          </div>
        </div>

        <div class="col dropup">

          <button type="button" class="btn rounded" data-toggle="dropdown" ng-show="3" title="更多操作">
            <i class="fa fa-ellipsis-v"></i>
          </button>

          <div class="dropdown-menu">
            <a class="dropdown-item" data-toggle="modal" data-target="#bottom"><i class="fa fa-link"></i> 查看链接 (3)</a>
            <div class="dropdown-divider"></div>
            <a href class="dropdown-item text-danger" ng-click="delete()"><i class="fa fa-trash"></i> 删除 (3)</a>
          </div>
          <button class="btn rounded {3 ? 'btn-danger' : ''}" ng-disabled="!3" ng-click="delete()">
            <i class="fa fa-trash"></i> 删除 <span ng-show="3">(3)</span>
          </button>
        </div>

        <div class="col">
          <label class="btn rounded btn-success mb-0">
            <i class="fa fa-cloud-upload"></i> 上传
            <input type="file" class="hide" multiple @change="">
          </label>
        </div>

        <div class="col">
          <button class="btn btn-secondary rounded {page.firstPage ? 'hidden' : ''}" ng-click="paging(page.prevPageNumber)">上一页</button>
          <button class="btn btn-secondary rounded {page.lastPage ? 'hidden' : ''}" ng-click="paging(page.nextPageNumber)">下一页</button>
        </div>
      </div>

      <div class="modal fade black-overlay" id="bottom">
        <div class="bottom bg-white px-3 py-3 bt-l font-md-center ">
          <h3 class="font-thin mb-3 text-info">文件链接</h3>
          <dl class="row mb-0" ng-repeat="file in selected">
            <dt class="col">{file.filename}</dt>
            <dd class="col">{file.url}</dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>
<!--
  文件管理模块
-->
<script>
  export default {
    name: 'files',
    data: () => ({}),
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.$nextTick(() => vm.$emit('loaded'))
      })
    }
  }
</script>